<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>头条上传</el-breadcrumb-item>
      <el-breadcrumb-item>计划管理</el-breadcrumb-item>
    </el-breadcrumb>
   <!--  <el-form
        inline
        class="m-table--handle"
      >
        <el-form-item>
          <el-button
            size="mini"
            type="primary"
            @click="handleClickCreate"
          >新增</el-button>
        </el-form-item>
        <CustomTableColumn :columns.sync="tableColumn" />
      </el-form> -->

    <Container>
      <!-- 表格 -->
      <ContainerTitle>头条批量创建平台</ContainerTitle>
      <el-button
            size="mini"
            type="primary"
            @click="handleClickCreate"
            class="u-mb10"
          >新增</el-button>
      <el-table
        ref="multipleTable"
        border
        stripe
        :data="tableData"
        
      >
       <!--  </el-table-column> --> -->
        <el-table-column
          align="center"
          v-for="(item, index) in filterTableColumn"
          :label="item.label"
          :key="index"
        >
          <template slot-scope="scope">
            <!-- 其他 -->
            <template v-if="item.prop === 'status'" ><div v-html="scope.row.status"></div></template>
            <template v-else>{{scope.row[item.prop]}}</template>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="150"
        >
          <template  slot-scope="scope">
            <el-button
              type="text"
              @click="handleClickLook(scope.row.plan)"
            >查看模板内容</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        :page-sizes="[50, 100, 500, 1000]"
        :page-size="page.pageSize"
        layout="total, prev, pager, next, sizes"
        :total="pageTotal"
        @size-change="handlePagerSizeChange"
        @current-change="handlePagerCurrentChange"
      />
    </Container>

    <!-- 运营方式 -->
    <el-dialog
      title="模版详情"
      :visible.sync="dialogOperateVisible"
      width="542px"
    >
      <el-alert
        type=""
        :closable="false"
        class="u-mb20"
      >

        <div v-html="templateData"></div>
        
      </el-alert>
      <el-row
        type="flex"
        justify="end"
      >
        <el-button
          size="small"
          type="primary"
          @click="dialogOperateVisible = false"
        >确定</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>

import Container from "@/components/container";
import ContainerTitle from "@/components/container-title";
import CustomTableColumn from "@/components/custom-table-column";

import { exportExcel } from '@/utils/fileDown.js';
import { OPERATOR_OPTION, CUSTOMER_ROLE_OPTION } from "@/assets/js/flow-option";
import { mapOptionLabel } from "@/util";

export default {
  name: "flow-account",
  components: {
    Container,
    CustomTableColumn,
    ContainerTitle
  },
  data() {
    return {
      OPERATOR_OPTION,
      CUSTOMER_ROLE_OPTION,
      // 模版
      dialogOperateVisible: false,
      templateData:'',
      tableData: [],
      tableSelectionData: [],
      tableColumn: [
        {
          label: "任务名称",
          prop: "taskName",
          visible: true
        },
        {
          label: "账号名称",
          prop: "accountName",
          visible: true
        },
        {
          label: "上传状态",
          prop: "status",
          visible: true
        },
        {
          label: "操作人",
          prop: "operate",
          visible: true
        },
        {
          label: "操作日期",
          prop: "date",
          visible: true
        }
      ],
      page: {
        pageNo: 1,
        pageSize: 100
      },
      pageTotal: 0
    };
  },
  computed: {
    filterTableColumn() {
      return this.tableColumn.filter(item => item.visible);
    }
  },
  methods: {
    mapOptionLabel,
    exportExcel,
    handleClickCreate(){
      this.$router.push({
        name: 'toutiao-detail',
        query: {
          action: 'create'
        }
      })
    },
    handleClickLook(data){
      this.$router.push({
        name: 'toutiao-see',
        query: {
          data: data
        }
      })
      // 获取模版接口
      // console.log(id)
      /* this.dialogOperateVisible = true
      this.$http({
        method: "get",
        url: "/marketing/api/task/getTemplateByTaskId",
        params: {
         taskId: id,
        }
      }).then(res => {
        if (res.data.code === 1) {
          this.templateData = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }); */
    },
    
    // 运营人员
    getCurrentOperate(data = []) {
      let len = data.length;
      if (len) {
        let item = data[len - 1];
        return `${item.operatorBy}`;
      }
      return "-";
    },

    // 列表
    search() {
      this.page.pageNo = 1;
      this.getTable();
    },
    getTable() {
      this.$http({
        method: "get",
        url: "/marketing_tt/api/task_tt/query",
        params: {
         offset: this.page.pageNo,
         limit: this.page.pageSize,
        }
      }).then(res => {  
        if (res.data.code === 1) {
          let data = res.data.data;
          this.tableData = data.list;
          this.pageTotal = data.total;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    handlePagerSizeChange(v) {
      this.page.pageSize = v;
      this.getTable();
    },
    handlePagerCurrentChange(v) {
      this.page.pageNo = v;
      this.getTable();
    }
  },
  activated() {
    this.getTable();
  }
};
</script>